<template>
  <div class="login">
    <div class="box">
      <li class="text">振涛教育考务管理后台</li>
      <li><el-input placeholder="请输入内容" v-model="user" clearable prefix-icon="el-icon-user"></el-input></li>
      <li><el-input placeholder="请输入密码" v-model="pwd" show-password prefix-icon="el-icon-lock"></el-input></li>
      <li> <el-button type="info" size="medium" class="btn" @click="login">登录</el-button></li>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        user: '',
        pwd:''
      }
    },
      methods:{
         login(){
           const {user,pwd} = this;
           if(!user){
              this.$message({
                message: '账号不可为空',
                type: 'warning'
              });
              return
           }
           if(!pwd){
             this.$message({
                message: '密码不可为空',
                type: 'warning'
              });
              return
           }
            this.$httpAxios(this.$api.LOGIN({username:user,password:pwd}),res=>{
              console.log(res)
              // localStorage.user = user
              // this.$router.push('/home')
            })
         }
      }
  }
</script>
<style scoped>
  .text{
    text-align: center  ;
  }
  .login{
    width: 100vw;
    height: 100vh;
    background: #fff;
    font-size: 20px;
    
  }
  .box{
    line-height: 60px;
    width: 500px;
    height: 384px;
    position: absolute;
    padding-top: 52px;
    box-sizing: border-box;
    padding-left: 35px;
    padding-right: 35px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border: 1px solid #ccc;
  }
  .btn{
    width: 420px;
    background: #101935;
    height: 50px;
    display: block;
    margin: 0 auto;
  }
</style>